<!-- 检索引擎 - 结果处理工作区 -->
<template>
  <div class="result-workspace">
    <!-- 顶部工具栏 -->
    <div class="workspace-header">
      <div class="header-left">
        <h1 class="workspace-title">
          <el-icon class="title-icon"><Search /></el-icon>
          结果处理工作区
        </h1>
        <div class="workspace-info">
          <el-tag type="info" size="small">当前查询: {{ currentQuery }}</el-tag>
          <el-tag type="success" size="small" v-if="processingComplete">
            <el-icon><Check /></el-icon>
            处理完成
          </el-tag>
        </div>
      </div>

      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="exportResults">
            <el-icon><Download /></el-icon>
            导出结果
          </el-button>
          <el-button size="small" @click="shareResults">
            <el-icon><Share /></el-icon>
            分享
          </el-button>
          <el-button size="small" type="primary" @click="backToSearch">
            <el-icon><Back /></el-icon>
            返回检索
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主工作区域 -->
    <div class="workspace-content">
      <!-- 左侧控制面板 -->
      <el-aside :width="leftPanelWidth" class="left-panel">
        <el-tabs v-model="leftActiveTab" stretch class="panel-tabs">
          <el-tab-pane label="排序控制" name="sorting">
            <SortingPanel
              :result-count="searchResults.length"
              @sort-change="handleSortChange"
              @weight-change="handleWeightChange"
            />
          </el-tab-pane>
          <el-tab-pane label="筛选器" name="filter">
            <div class="filter-panel">
              <div class="filter-section">
                <h4>时间范围</h4>
                <el-date-picker
                  v-model="timeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="small"
                  @change="handleTimeFilter"
                />
              </div>
              
              <div class="filter-section">
                <h4>频率范围</h4>
                <el-slider
                  v-model="frequencyRange"
                  range
                  :min="0"
                  :max="30"
                  :step="0.1"
                  show-input
                  @change="handleFrequencyFilter"
                />
              </div>
              
              <div class="filter-section">
                <h4>信号类型</h4>
                <el-checkbox-group v-model="selectedTypes" @change="handleTypeFilter">
                  <el-checkbox label="雷达信号">雷达信号</el-checkbox>
                  <el-checkbox label="通信信号">通信信号</el-checkbox>
                  <el-checkbox label="导航信号">导航信号</el-checkbox>
                  <el-checkbox label="干扰信号">干扰信号</el-checkbox>
                </el-checkbox-group>
              </div>
              
              <div class="filter-actions">
                <el-button size="small" @click="resetFilters">重置</el-button>
                <el-button size="small" type="primary" @click="applyFilters">应用</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 面板调整器 -->
        <div
          class="panel-resizer left-resizer"
          @mousedown="startResize('left', $event)"
        ></div>
      </el-aside>

      <!-- 中央结果显示区域 -->
      <el-main class="results-area">
        <div class="results-header">
          <div class="results-stats">
            <span class="result-count">找到 {{ filteredResults.length }} 条结果</span>
            <span class="processing-time">处理时间: {{ processingTime }}ms</span>
          </div>
          
          <div class="view-controls">
            <el-radio-group v-model="viewMode" size="small">
              <el-radio-button label="list">列表视图</el-radio-button>
              <el-radio-button label="grid">网格视图</el-radio-button>
              <el-radio-button label="detail">详细视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <!-- 结果列表 -->
        <div class="results-container" :class="viewMode">
          <div
            v-for="(result, index) in paginatedResults"
            :key="result.id"
            class="result-item"
            @click="selectResult(result)"
            :class="{ selected: selectedResultIds.includes(result.id) }"
          >
            <!-- 列表视图 -->
            <template v-if="viewMode === 'list'">
              <div class="result-checkbox">
                <el-checkbox
                  :model-value="selectedResultIds.includes(result.id)"
                  @change="toggleResultSelection(result.id)"
                  @click.stop
                />
              </div>
              
              <div class="result-content">
                <div class="result-header">
                  <h4 class="result-title">{{ result.name }}</h4>
                  <div class="result-meta">
                    <el-tag size="small" :type="getSignalTypeTag(result.type)">
                      {{ result.type }}
                    </el-tag>
                    <span class="result-time">{{ formatTime(result.timestamp) }}</span>
                  </div>
                </div>
                
                <div class="result-params">
                  <div class="param-item">
                    <span class="param-label">频率:</span>
                    <span class="param-value">{{ result.frequency }}</span>
                  </div>
                  <div class="param-item">
                    <span class="param-label">信噪比:</span>
                    <span class="param-value">{{ result.snr }}dB</span>
                  </div>
                  <div class="param-item">
                    <span class="param-label">相似度:</span>
                    <span class="param-value similarity" :style="{ color: getSimilarityColor(result.similarity) }">
                      {{ result.similarity }}%
                    </span>
                  </div>
                </div>
              </div>
              
              <div class="result-actions">
                <el-button size="small" text @click.stop="viewDetails(result)">
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button size="small" text @click.stop="addToComparison(result)">
                  <el-icon><Plus /></el-icon>
                </el-button>
              </div>
            </template>
            
            <!-- 网格视图 -->
            <template v-if="viewMode === 'grid'">
              <div class="grid-item-header">
                <el-checkbox
                  :model-value="selectedResultIds.includes(result.id)"
                  @change="toggleResultSelection(result.id)"
                  @click.stop
                />
                <span class="grid-item-title">{{ result.name }}</span>
              </div>
              
              <div class="grid-item-preview">
                <!-- 简化的波形预览 -->
                <div class="waveform-preview"></div>
              </div>
              
              <div class="grid-item-info">
                <div class="info-row">
                  <span>{{ result.frequency }}</span>
                  <span class="similarity">{{ result.similarity }}%</span>
                </div>
                <div class="info-time">{{ formatTime(result.timestamp) }}</div>
              </div>
            </template>
            
            <!-- 详细视图 -->
            <template v-if="viewMode === 'detail'">
              <div class="detail-item">
                <el-checkbox
                  :model-value="selectedResultIds.includes(result.id)"
                  @change="toggleResultSelection(result.id)"
                  @click.stop
                />
                
                <div class="detail-content">
                  <div class="detail-header">
                    <h3>{{ result.name }}</h3>
                    <el-tag :type="getSignalTypeTag(result.type)">{{ result.type }}</el-tag>
                  </div>
                  
                  <div class="detail-params">
                    <el-descriptions :column="3" size="small">
                      <el-descriptions-item label="频率">{{ result.frequency }}</el-descriptions-item>
                      <el-descriptions-item label="带宽">{{ result.bandwidth }}</el-descriptions-item>
                      <el-descriptions-item label="信噪比">{{ result.snr }}dB</el-descriptions-item>
                      <el-descriptions-item label="相似度">
                        <span :style="{ color: getSimilarityColor(result.similarity) }">
                          {{ result.similarity }}%
                        </span>
                      </el-descriptions-item>
                      <el-descriptions-item label="时间">{{ formatTime(result.timestamp) }}</el-descriptions-item>
                      <el-descriptions-item label="位置">{{ result.location }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                  
                  <div class="detail-waveform">
                    <div class="waveform-chart" :ref="el => setChartRef(result.id, el)"></div>
                  </div>
                </div>
                
                <div class="detail-actions">
                  <el-button size="small" @click.stop="viewDetails(result)">详情</el-button>
                  <el-button size="small" @click.stop="addToComparison(result)">对比</el-button>
                  <el-button size="small" @click.stop="downloadResult(result)">下载</el-button>
                </div>
              </div>
            </template>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="filteredResults.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>

      <!-- 右侧比对面板 -->
      <el-aside :width="rightPanelWidth" class="right-panel">
        <ComparisonTool
          :available-results="searchResults"
          @selection-change="handleComparisonChange"
          @comparison-update="handleComparisonUpdate"
        />

        <!-- 面板调整器 -->
        <div
          class="panel-resizer right-resizer"
          @mousedown="startResize('right', $event)"
        ></div>
      </el-aside>
    </div>

    <!-- 底部状态栏 -->
    <div class="workspace-footer">
      <div class="status-left">
        <div class="status-item">
          <el-icon><DataBoard /></el-icon>
          <span>已选择: {{ selectedResultIds.length }} 项</span>
        </div>
        <div class="status-item">
          <el-icon><Timer /></el-icon>
          <span>用时: {{ processingTime }}ms</span>
        </div>
        <div class="status-item" v-if="comparisonInfo.count > 0">
          <el-icon><DataAnalysis /></el-icon>
          <span>对比中: {{ comparisonInfo.count }} 项</span>
        </div>
      </div>

      <div class="status-right">
        <div class="bulk-actions" v-if="selectedResultIds.length > 0">
          <el-button-group size="small">
            <el-button @click="exportSelected">
              <el-icon><Download /></el-icon>
              导出选中
            </el-button>
            <el-button @click="addAllToComparison">
              <el-icon><DataAnalysis /></el-icon>
              批量对比
            </el-button>
            <el-button @click="clearSelection">
              <el-icon><Close /></el-icon>
              清空选择
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  Search, Check, Download, Share, Back, View, Plus, Close,
  DataBoard, Timer, DataAnalysis
} from '@element-plus/icons-vue'
import SortingPanel from './components/result/SortingPanel.vue'
import ComparisonTool from './components/result/ComparisonTool.vue'
import * as echarts from 'echarts'

// 路由
const router = useRouter()

// 响应式数据
const currentQuery = ref('电磁信号特征检索')
const processingComplete = ref(true)
const processingTime = ref(1247)

// 面板控制
const leftPanelWidth = ref('25vw')
const rightPanelWidth = ref('30vw')
const leftActiveTab = ref('sorting')

// 筛选控制
const timeRange = ref(null)
const frequencyRange = ref([2.4, 5.8])
const selectedTypes = ref(['雷达信号', '通信信号'])

// 视图控制
const viewMode = ref('list')
const currentPage = ref(1)
const pageSize = ref(20)
const selectedResultIds = ref([])

// 比对信息
const comparisonInfo = ref({ count: 0, maxSimilarity: 0, avgSimilarity: 0 })

// 图表引用
const chartRefs = ref(new Map())

// 模拟搜索结果数据
const searchResults = ref([
  {
    id: 1,
    name: '雷达信号_001',
    type: '雷达信号',
    frequency: '3.2GHz',
    bandwidth: '50MHz',
    snr: 25,
    similarity: 87,
    timestamp: new Date('2024-01-15 14:30:00'),
    location: '116.4°E, 39.9°N'
  },
  {
    id: 2,
    name: '通信信号_002',
    type: '通信信号',
    frequency: '2.4GHz',
    bandwidth: '20MHz',
    snr: 18,
    similarity: 76,
    timestamp: new Date('2024-01-15 14:35:00'),
    location: '116.5°E, 39.8°N'
  },
  {
    id: 3,
    name: '导航信号_003',
    type: '导航信号',
    frequency: '1.5GHz',
    bandwidth: '10MHz',
    snr: 32,
    similarity: 92,
    timestamp: new Date('2024-01-15 14:28:00'),
    location: '116.3°E, 40.0°N'
  },
  {
    id: 4,
    name: '干扰信号_004',
    type: '干扰信号',
    frequency: '4.8GHz',
    bandwidth: '100MHz',
    snr: 12,
    similarity: 65,
    timestamp: new Date('2024-01-15 14:40:00'),
    location: '116.6°E, 39.7°N'
  },
  {
    id: 5,
    name: '雷达信号_005',
    type: '雷达信号',
    frequency: '9.4GHz',
    bandwidth: '200MHz',
    snr: 28,
    similarity: 83,
    timestamp: new Date('2024-01-15 14:25:00'),
    location: '116.2°E, 40.1°N'
  }
])

// 计算属性
const filteredResults = computed(() => {
  let results = [...searchResults.value]
  
  // 应用类型筛选
  if (selectedTypes.value.length > 0) {
    results = results.filter(result => selectedTypes.value.includes(result.type))
  }
  
  // 应用频率筛选
  results = results.filter(result => {
    const freq = parseFloat(result.frequency)
    return freq >= frequencyRange.value[0] && freq <= frequencyRange.value[1]
  })
  
  return results
})

const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredResults.value.slice(start, end)
})

// 方法
const backToSearch = () => {
  router.push('/search-engine/home')
}

const exportResults = () => {
  console.log('导出所有结果')
}

const shareResults = () => {
  console.log('分享结果')
}

const handleSortChange = (sortConfig) => {
  console.log('排序变化:', sortConfig)
  // 实现排序逻辑
}

const handleWeightChange = (weights) => {
  console.log('权重变化:', weights)
  // 实现权重调整逻辑
}

const handleTimeFilter = (range) => {
  console.log('时间筛选:', range)
}

const handleFrequencyFilter = (range) => {
  console.log('频率筛选:', range)
}

const handleTypeFilter = (types) => {
  console.log('类型筛选:', types)
}

const resetFilters = () => {
  timeRange.value = null
  frequencyRange.value = [2.4, 5.8]
  selectedTypes.value = ['雷达信号', '通信信号']
}

const applyFilters = () => {
  console.log('应用筛选')
}

const selectResult = (result) => {
  console.log('选择结果:', result)
}

const toggleResultSelection = (id) => {
  const index = selectedResultIds.value.indexOf(id)
  if (index > -1) {
    selectedResultIds.value.splice(index, 1)
  } else {
    selectedResultIds.value.push(id)
  }
}

const viewDetails = (result) => {
  console.log('查看详情:', result)
}

const addToComparison = (result) => {
  console.log('添加到对比:', result)
}

const downloadResult = (result) => {
  console.log('下载结果:', result)
}

const getSignalTypeTag = (type) => {
  const typeMap = {
    '雷达信号': 'danger',
    '通信信号': 'primary',
    '导航信号': 'success',
    '干扰信号': 'warning'
  }
  return typeMap[type] || 'info'
}

const getSimilarityColor = (similarity) => {
  if (similarity >= 80) return '#10b981'
  if (similarity >= 60) return '#f59e0b'
  return '#ef4444'
}

const formatTime = (timestamp) => {
  return timestamp.toLocaleString('zh-CN')
}

const handleSizeChange = (size) => {
  pageSize.value = size
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const handleComparisonChange = (selectedResults) => {
  console.log('比对选择变化:', selectedResults)
}

const handleComparisonUpdate = (info) => {
  comparisonInfo.value = info
}

const exportSelected = () => {
  console.log('导出选中项:', selectedResultIds.value)
}

const addAllToComparison = () => {
  console.log('批量添加到对比')
}

const clearSelection = () => {
  selectedResultIds.value = []
}

const setChartRef = (id, el) => {
  if (el) {
    chartRefs.value.set(id, el)
  }
}

// 面板大小调整
const startResize = (panel, event) => {
  event.preventDefault()
  
  const startX = event.clientX
  const startWidth = panel === 'left' ? 
    parseInt(leftPanelWidth.value) : 
    parseInt(rightPanelWidth.value)
  
  const onMouseMove = (e) => {
    const deltaX = e.clientX - startX
    const newWidth = panel === 'left' ? 
      Math.max(200, Math.min(500, startWidth + deltaX)) :
      Math.max(200, Math.min(500, startWidth - deltaX))
    
    if (panel === 'left') {
      leftPanelWidth.value = `${newWidth}px`
    } else {
      rightPanelWidth.value = `${newWidth}px`
    }
  }
  
  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  }
  
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}

// 生命周期
onMounted(() => {
  // 初始化一些结果选中状态
  selectedResultIds.value = [1, 3]
})
</script>

<style scoped>
/* 适配侧边栏布局的样式 */
* {
  box-sizing: border-box;
}

/* 主容器 - 适配侧边栏布局 */
.result-workspace {
  width: 96vw;
  height: 100vh;
  background: #1f2d3d; /* 使用与侧边栏一致的深色背景 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 4vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部工具栏 */
.workspace-header {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: linear-gradient(135deg, #263445, #1f2d3d); /* 使用深色渐变 */
  border-bottom: 1px solid #2d3a4b; /* 深色边框 */
  box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.3); /* 加深阴影 */
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.workspace-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #bfcbd9; /* 使用与侧边栏一致的文字颜色 */
  display: flex;
  align-items: center;
  gap: 1vw;
}

.title-icon {
  font-size: 1.6rem;
  color: var(--el-color-primary);
}

.workspace-info {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.header-actions {
  display: flex;
  gap: 1vw;
}

.action-group .el-button {
  height: 3.5vh;
  font-size: 0.85rem;
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  color: #cbd5e1;
}

.action-group .el-button:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #3b82f6;
}

.action-group .el-button--primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #3b82f6;
  color: #ffffff;
}

/* 主工作区域 */
.workspace-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧面板 */
.left-panel {
  background: #263445; /* 使用与侧边栏一致的深色背景 */
  border-right: 1px solid #2d3a4b; /* 深色边框 */
  position: relative;
  overflow: hidden;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); /* 加深阴影 */
}

.panel-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-tabs :deep(.el-tabs__header) {
  background: rgba(30, 41, 59, 0.8);
  margin: 0;
  border-bottom: 1px solid rgba(71, 85, 105, 0.4);
}

.panel-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0;
}

.panel-tabs :deep(.el-tabs__item) {
  color: #94a3b8;
  font-size: 1.3vh;
  padding: 1.5vh 2vh;
}

.panel-tabs :deep(.el-tabs__item.is-active) {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.panel-tabs :deep(.el-tabs__content) {
  flex: 1;
  padding: 2vh;
  overflow-y: auto;
}

.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.filter-section {
  background: rgba(30, 41, 59, 0.6);
  padding: 1.5vh;
  border-radius: 0.8vh;
  border: 1px solid rgba(71, 85, 105, 0.4);
}

.filter-section h4 {
  margin: 0 0 1vh 0;
  font-size: 1.3vh;
  color: #e2e8f0;
}

.filter-actions {
  display: flex;
  gap: 1vh;
  justify-content: flex-end;
}

/* 中央结果区域 */
.results-area {
  flex: 1;
  background: #1f2d3d; /* 使用与主背景一致的颜色 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh;
  border-bottom: 1px solid rgba(71, 85, 105, 0.4);
}

.results-stats {
  display: flex;
  gap: 2vh;
  align-items: center;
}

.result-count {
  font-size: 1.4vh;
  font-weight: 600;
  color: #e2e8f0;
}

.processing-time {
  font-size: 1.2vh;
  color: #94a3b8;
}

.view-controls :deep(.el-radio-button__inner) {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  color: #cbd5e1;
  font-size: 1.2vh;
}

.view-controls :deep(.el-radio-button__original:checked + .el-radio-button__inner) {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #3b82f6;
  color: #ffffff;
}

.results-container {
  flex: 1;
  padding: 2vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.results-container.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25vh, 1fr));
  gap: 2vh;
}

/* 结果项样式 */
.result-item {
  background: rgba(30, 41, 59, 0.6);
  border-radius: 1vh;
  border: 1px solid rgba(71, 85, 105, 0.4);
  padding: 2vh;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 0.5vh 2vh rgba(59, 130, 246, 0.2);
  transform: translateY(-0.2vh);
}

.result-item.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

/* 列表视图样式 */
.results-container.list .result-item {
  display: flex;
  align-items: center;
  gap: 2vh;
}

.result-checkbox {
  flex-shrink: 0;
}

.result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-title {
  margin: 0;
  font-size: 1.4vh;
  font-weight: 600;
  color: #e2e8f0;
}

.result-meta {
  display: flex;
  gap: 1vh;
  align-items: center;
}

.result-time {
  font-size: 1.1vh;
  color: #94a3b8;
}

.result-params {
  display: flex;
  gap: 3vh;
}

.param-item {
  display: flex;
  gap: 0.5vh;
  font-size: 1.2vh;
}

.param-label {
  color: #94a3b8;
}

.param-value {
  color: #cbd5e1;
  font-weight: 600;
}

.param-value.similarity {
  font-weight: 700;
}

.result-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.5vh;
}

/* 网格视图样式 */
.results-container.grid .result-item {
  display: flex;
  flex-direction: column;
  height: 20vh;
}

.grid-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.grid-item-title {
  font-size: 1.3vh;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-item-preview {
  flex: 1;
  background: rgba(51, 65, 85, 0.4);
  border-radius: 0.5vh;
  margin-bottom: 1vh;
}

.waveform-preview {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.3) 50%, transparent 70%);
}

.grid-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1vh;
  color: #cbd5e1;
}

.info-row .similarity {
  font-weight: 600;
  color: #3b82f6;
}

.info-time {
  font-size: 1vh;
  color: #94a3b8;
}

/* 详细视图样式 */
.results-container.detail .result-item {
  display: flex;
  gap: 2vh;
  min-height: 15vh;
}

.detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-header h3 {
  margin: 0;
  font-size: 1.6vh;
  color: #e2e8f0;
}

.detail-params {
  margin: 1vh 0;
}

.detail-params :deep(.el-descriptions__label) {
  color: #94a3b8;
  font-size: 1.1vh;
}

.detail-params :deep(.el-descriptions__content) {
  color: #cbd5e1;
  font-size: 1.1vh;
}

.detail-waveform {
  flex: 1;
  min-height: 8vh;
}

.waveform-chart {
  width: 100%;
  height: 100%;
  background: rgba(51, 65, 85, 0.3);
  border-radius: 0.5vh;
}

.detail-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

/* 右侧面板 */
.right-panel {
  background: #263445; /* 使用与侧边栏一致的深色背景 */
  border-left: 1px solid #2d3a4b; /* 深色边框 */
  position: relative;
  overflow: hidden;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3); /* 加深阴影 */
}

/* 面板调整器 */
.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(59, 130, 246, 0.5);
  cursor: col-resize;
  transition: background 0.3s ease;
  z-index: 10;
}

.panel-resizer:hover {
  background: var(--el-color-primary);
}

.left-resizer {
  right: 0;
}

.right-resizer {
  left: 0;
}

/* 分页容器 */
.pagination-container {
  padding: 2vh;
  border-top: 1px solid rgba(71, 85, 105, 0.4);
  display: flex;
  justify-content: center;
}

.pagination-container :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(30, 41, 59, 0.8);
  --el-pagination-text-color: #cbd5e1;
  --el-pagination-border-radius: 0.5vh;
}

.pagination-container :deep(.el-pagination__editor) {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  color: #cbd5e1;
}

/* 底部状态栏 */
.workspace-footer {
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2vw;
  background: linear-gradient(135deg, #263445, #1f2d3d); /* 使用深色渐变 */
  border-top: 1px solid #2d3a4b; /* 深色边框 */
  box-shadow: 0 -0.2vh 0.8vh rgba(0, 0, 0, 0.3); /* 加深阴影 */
  z-index: 100;
}

.status-left {
  display: flex;
  gap: 3vh;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vh;
  font-size: 1.2vh;
  color: #94a3b8;
}

.status-item .el-icon {
  color: #3b82f6;
}

.status-right {
  display: flex;
  gap: 1vh;
}

.bulk-actions .el-button {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  color: #cbd5e1;
  font-size: 1.1vh;
}

.bulk-actions .el-button:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #3b82f6;
}

/* 响应式调整 */
@media (max-width: 1400px) {
  .workspace-title {
    font-size: 2vh;
  }
  
  .result-title {
    font-size: 1.3vh;
  }
  
  .param-item {
    font-size: 1.1vh;
  }
}

@media (max-width: 1200px) {
  .results-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(20vh, 1fr));
  }
  
  .left-panel,
  .right-panel {
    width: 30vw !important;
  }
}
</style>